<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1">
    <title>个人主页</title>

    <link rel="stylesheet" href="CSS/personal_page.css">
    <link rel="stylesheet" href="CSS/reset.css">
</head>
<body>
<div class="wrapper">
    <!-- 首部图标  -->
    <div class="top_icon">
        <div class="left">
            <div class="return_back" onclick="location.href='mine.html'">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                    <path fill="#FFFFFF" d="M14.707 5.293a1 1 0 0 1 0 1.414L9.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"/>
                </svg>
            </div>
            <div class="return_home" onclick="location.href='main.html'">
                <img src="bili_icon/bili_home.png" alt="">
            </div>
        </div>
        
        <div class="right">
            <div class="searcch">
                <img src="bili_icon/bili_search%20(2).png" alt="">
            </div>
            <div class="more">
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                    <path fill="#FFFFFF" d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0m0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- 背景图片 -->
    <div class="background">
        <img src="img/background.jpg" alt="">
        <div class="cloth">
            <img src="bili_icon/bili_cloth.png" alt="">
        </div>
    </div>

    <div class="information">
        <div class="avatar"><img src="img/avatar.jpg" alt=""></div>
        <div class="data">
            <div class="top">
                <div class="fans">
                    <div class="count">6</div>
                    <p>粉丝</p>
                </div>

                <div class="v-line1"></div>

                <div class="attention">
                    <div class="count">220</div>
                    <p>关注</p>
                </div>

                <div class="v-line2"></div>

                <div class="zan">
                    <div class="count">3</div>
                    <p>获赞</p>
                </div>
            </div>
            <div class="bottom">
                编辑资料
            </div>
        </div>
    </div>

    <div class="detail">
        <div class="name">
            <p>用户名</p>
            <div class="huiyuan">
                大会员
            </div>
        </div>
        <div class="level">
            <img src="bili_icon/bili_level.png" alt="">
            22308/28800
        </div>
        <div class="g-container">
            <div class="g-progress"></div>
        </div>
        <div class="introduce">
            <div class="left">
                这个人很神秘，什么都没有写
            </div>
            <div class="right">详情</div>
        </div>
        <div class="ip">
            <img src="bili_icon/bili_ip.jpg" alt="">
            <p>IP属地：云南</p>
        </div>
    </div>

    <!-- 分割线 -->
    <div class="line"></div>

    <!-- 功能列表  -->
    <div class="function">
            <div>主页</div>
            <div>动态</div>
            <div  class="current">
                投稿
                <div class="horizontal-line"></div>
            </div>
            <div>收藏</div>
            <div>追番</div>
    </div>

    <!-- 分割线 -->
    <div class="line"></div>

</div>
</body>
</html>